<!--
  组件名称：框
  type: primary
        special
  -->
<template>
  <div class="section-wrapper" :class="[{ 'section-wrapper-border': border, 'wrapper-expand': expand }, `section-wrapper-${type}`]" :style="[bgStyle]">
    <div class="section-wrapper-top" v-if="hasTitle">
      <slot name="title">
        <div class="title">
          <span class="title-t">{{ title }}</span>
        </div>
      </slot>
      <div class="tips-right" v-if="$slots['right']" :style="{ right }">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="section-wrapper-content" :style="{ height: height }">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SectionWrapper',
  props: {
    title: String,
    border: {
      type: Boolean,
      default: true
    },
    height: {
      type: String,
      default: 'auto'
    },
    type: {
      type: String,
      default: 'primary'
    },
    hasTitle: {
      type: Boolean,
      default: true
    },
    position: String,
    expand: {
      type: Boolean,
      default: false
    },
    right: String
  },
  computed: {
    bgStyle () {
      return {
        backgroundColor: this.bgColor,
        position: this.position
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
